<template>
  <div class="purchase">
    <div class="mui-scroll-wrapper">
      <div class="mui-scroll">
        <header id="header" class="mui-bar mui-bar-nav">
          <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
          <h1 class="mui-title">笑笑宝账户</h1>
          <router-link to="/purchase" class="mui-icon mui-icon-plusempty mui-pull-right"></router-link>
        </header>
        <div class="mui-content content">
          <div class="state">
            <p>1.最多可以通过以下三种方式进行转账。</p>
            <p>2.通过左右滑动来切换显示转账方式。</p>
            <p>3.通过右上角的加号进行购物劵购买申请操作。</p>
            <p style="color:red;">4.转账时请备注上登录易销国际系统的手机号及姓名。</p>
          </div>
          <div class="mui-slider" id="slider">
            <div class="mui-slider-group">
              <!--第三个内容区-->
              <div class="mui-slider-item">
                <div class="mui-input-row">
                  <label>开户银行：</label>
                  <input v-model="bankname" type="select" v-tap="{method:selectAccount}" style="padding:10px 15px 10px 0px;"/>
                </div>
                <div class="mui-input-row">
                  <label>银行账户：</label>
                  <input v-model="account" type="text"/>
                </div>
                <div class="mui-input-row">
                  <label>户主姓名：</label>
                  <input type="text" v-model="username" disabled/>
                </div>
              </div>
              <!--第一个内容区容器-->
              <div class="mui-slider-item">
                <img :src="zhifubao" class="imgs"/>
              </div>
              <!--第二个内容区-->
              <div class="mui-slider-item">
                <img :src="weixin" class="imgs"/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        username:'无',
        account:'无',
        bankname:'无',
        weixin:'',
        zhifubao:'',
        accounts:null,
      }
    },
    mounted(){
      mui('.mui-scroll-wrapper').scroll({
        deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
      });
      this.getZhifubao();
      this.getWeixin();
      this.getAccount();
      var slider = mui('#slider').slider();
      slider.stopped = false; //开启滑动切换
    },
    methods:{
      //获取支付宝收款码
      getZhifubao(){
        var that = this;
        return new Promise(function (resolve, reject) {
          that.$http.post(that.$http.adornUrl(that.$api.getParameter), {
            "parameter":"zhifubao",
          }).then(function(res){
            mui.toast(res.errmsg);
            if(res.errno == 0){
              that.zhifubao=res.data["parameter_value"];
              resolve();
            }else{
              reject("请求支付宝图片失败请重试");
            }
          }).catch(function (err) {
            console.log(err);
            reject("请求支付宝图片失败请重试");
          });
        })
      },
      //获取微信收款码
      getWeixin(){
        var that = this;
        return new Promise(function (resolve, reject) {
          that.$http.post(that.$http.adornUrl(that.$api.getParameter), {
            "parameter":"weixin",
          }).then(function(res){
            mui.toast(res.errmsg);
            if(res.errno == 0){
              that.weixin=res.data["parameter_value"];
              resolve();
            }else{
              reject("请求微信图片失败请重试");
            }
          }).catch(function (err) {
            console.log(err);
            reject("请求微信图片失败请重试");
          });
        })
      },
      //获取笑笑宝银行账户
      getAccount(){
        var that = this;
        that.$http({url: that.$http.adornUrl(that.$api.getXiaoxiaoAccount),method:'get',params:that.$http.adornParams()})
          .then(function(res){
            if(res.errno==0){
              that.accounts=res.data;
              if(res.data.length){
                that.username=res.data[0].user_name;
                that.account=that.formatBankNo(res.data[0].account);
                that.bankname=res.data[0].bank_name;
              }
            }
          })
          .catch(function (err) {
            console.log("错误提示:",err);
          })
      },
      //切换显示笑笑宝银行账户
      selectAccount(){
        var that = this;
        if(that.accounts && that.accounts.length>0){
          var attr=[];
          that.accounts.map(function (item) {
            var account = {
              value:item.id,
              text:item.bank_name
            }
            attr.push(account);
          });
          var picker = new mui.PopPicker();
          picker.setData(attr);
          picker.show(function (selectItems) {
            that.accounts.map(function (item) {
              if(item.id=selectItems[0].value){
                that.username=item.user_name;
                that.account=that.formatBankNo(item.account);
                that.bankname=item.bank_name;
              }
            });
          })
        }else{
          mui.alert("请通过其他方式转账");
        };
      },
      //银行卡号格式转换
      formatBankNo(event){
        var bankNo = event+'';
          bankNo =bankNo.replace(/\s/g,'').replace(/[^\d]/g,'').replace(/(\d{4})(?=\d)/g,'$1-');
        return bankNo;
      },
    }
  }
</script>

<style scoped lang="less">
  .purchase{
    .mui-bar{
      background-color: #fff;
      .mui-title{
        font-size: 0.36rem;
      }
    }
    .mui-bar-nav {
      -webkit-box-shadow: 0 1px 6px #e6e6e6;
      box-shadow: 0 1px 6px #e6e6e6;
    }
    .mui-input-group:after{
      height: 0px;
    }
    .mui-input-group:before{
      height: 0;
    }
    .mui-input-group .mui-input-row:after{
      height: 0px;
    }
    .content{
      .state{
        margin-left: 0.2rem;
      }
      .mui-slider{
        .imgs{
          width:100%;
          padding:0.5rem 1rem;
        }
        .mui-input-row{
          label{
            text-align: center;
          }
        }
      }
    }
  }
</style>
